<template>
  <div class="shopping_box">
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      class="shopTable"
      empty-text="暂未选购商品"
      height="60vh"
      :loading='tableLoading'
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="商品图" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="table_img">
            <img :src="scope.row.flowerDto.imageUrl" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="table_img">
            <p>{{ scope.row.flowerDto.name }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订购价(￥)" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.salesPrice }}
        </template>
      </el-table-column>
      <el-table-column label="数量" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input-number
            @change="changeNum"
            v-model="scope.row.size"
            :min="1"
            :max="999999"
            step-strictly
            label="请输入"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="settlement">
      应付金额： ￥<span>{{ totalPrice }}</span>
      <div @click="placeOrder">去结算</div>
      <div style="background-color: red" @click="batchDelete">删除</div>
    </div>
    <el-dialog title="支付宝支付" :visible.sync="dialogFormVisible">
      <!-- <div v-html="payInfo.msg"></div> -->
      <!-- <div id="payBox"></div>
      <el-table :data="multipleSelection">
        <el-table-column label="商品名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="table_img">
              <p>{{ scope.row.flowerDto.name }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订购价(￥)" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.salesPrice }}
          </template>
        </el-table-column>
      </el-table> -->
      <!-- <img :src="payInfo.qrcode" alt="" width="150"> -->
      <div class="codeBox">
        <canvas ref="qrCanvas"></canvas>
        <div>请扫码支付，支付完成点击确认已支付</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="payCall">确认支付</el-button>
      </div>
    </el-dialog>
    <div id="payBox"></div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import QRCode from "qrcode";
import {
  getOrderByUserId,
  delOrderBatch,
  placeAnOrder,
  payOrderResult,
} from "@/api/order";
import { del } from "@/api/http";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      totalPrice: 0,
      userInfo: {},
      currentPage1: 1,
      total: 0,
      payInfo: {},
      dialogFormVisible: false,
      tableLoading:false
    };
  },
  created() {
    this.userInfo = JSON.parse(Cookies.get("userInfo"));
    this.queryList();
  },
  methods: {
    queryList() {
      this.tableLoading = true
      getOrderByUserId({ customerId: this.userInfo.id }).then((res) => {
        this.tableData = res.data || [];
        this.tableLoading = false
      }).finally(()=>{
        this.tableLoading = false
      });
    },
    changeNum(val) {
      this.setTotal();
    },
    setTotal() {
      let total = 0;
      this.multipleSelection.forEach((item) => {
        total += Number(item.salesPrice) * Number(item.size);
      });
      this.totalPrice = total;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.setTotal();
    },
    handleDelete(index, row) {
      this.toDelete([row.id]);
    },
    batchDelete() {
      if (!this.multipleSelection.length) {
        this.$message.info("请选择要删除的鲜花");
      }
      this.toDelete(this.multipleSelection.map((item) => item.id));
    },
    toDelete(ids) {
      delOrderBatch({ ids }).then((res) => {
        this.$message.success(res.msg || "删除成功");
        this.queryList();
      });
    },
    // placeOrder() {
    //   if (!this.multipleSelection.length) {
    //     this.$message.info("请选择要下单鲜花");
    //   }
    //   let ids = this.multipleSelection.map((item) => item.id);
    //   let params = {
    //     traceNo: ids.join(","),
    //     totalAmount: this.totalPrice,
    //     subject: this.multipleSelection
    //       .map((item) => item.flowerDto.name)
    //       .join(","),
    //   };
    //   payOrder(params).then((res) => {
    //     this.payInfo = {
    //       params: { traceNo: ids.join(",") },
    //       msg: res,
    //       info: {
    //         name: this.multipleSelection
    //           .map((item) => item.flowerDto.name)
    //           .join(","),
    //       },
    //     };
    //     // window.open(res)
    //     // this.dialogFormVisible = true;
    //       document.getElementById("payBox").innerHTML = res;
    //       // 关键代码，用于处理sb支付宝返回的数据，以下代码会开一个新页面用于支付
    //       console.log(document.forms)
    //       document.forms[0].setAttribute("target", "_blank");
    //       document.forms[0].submit();
    //     this.$nextTick(() => {
    //       // this.$refs.payBox.innerHTML = res\
    //     });
    //   });
    // },
    placeOrder() {
      if (!this.multipleSelection.length) {
        this.$message.info("请选择要下单鲜花");
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let ids = this.multipleSelection.map((item) => item.id);
      placeAnOrder({
        customerId: this.userInfo.id,
        orderIds: ids,
      }).then((resp) => {
        console.log(resp, "lllll");
        this.payInfo = {
          ...resp.data,
          orderIds: ids,
        };

        this.dialogFormVisible = true;
        this.$nextTick(() => {
          const canvas = this.$refs.qrCanvas;
          QRCode.toCanvas(canvas, resp.data.qrCode, (error) => {
            if (error) console.error(error);
          });
          loading.close();
        });

        // this.$message.success(resp.msg || "下单成功成功");
        // this.queryList();
      });
    },
    payCall() {
      let params = {
        ...this.payInfo,
      };
      delete params.qrCode;
      payOrderResult(params).then((res) => {
        console.log(res, "ggggggg");
        this.dialogFormVisible = false;
        this.$message.success(res.msg || "下单成功成功");
        this.queryList();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.shopping_box {
  .shopTable {
    width: 80vw;
    margin: 15px auto;
    .table_img {
      display: flex;
      align-items: center;
      img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
      }
      p {
        // width: 15vw;
        width: calc(100% - 80px);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical; // 从上到下垂直排列子元素
        -webkit-line-clamp: 2; // 显示两行内容
      }
    }
  }
  .settlement {
    width: 80vw;
    margin: 15px auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #e7e7e7;
    span {
      font-weight: 800;
    }
    div {
      height: 50px;
      background-color: #5e8677;
      color: white;
      line-height: 50px;
      padding: 0 20px;
      margin-left: 15px;
      cursor: pointer;
    }
  }
  .codeBox {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
</style>
